<template>
  <view class="reward_list">
    <view class="reward_list_content">
      <view v-for="(item, index) in shopList" :key="index" class="reward_list_item">
        <view class="reward_item_img">
          <image :src="item.logo" mode="widthFix" style="width: 100%"></image>
        </view>
        <view class="reward_item_warp">
          <view class="reward_item_title ellipsis-one-line">{{ item.shop_name }}</view>
          <view class="reward_item_warp_content">
            <view v-if="item.type === 2" class="reward_distance">
              <u-icon name="map" color="#888888" size="34" margin-right="10"></u-icon>
              <text class="distance_text">距您</text>
              <text class="distance_text" style="color: #FF8212;padding: 0 6rpx;">{{ (item.distance/1000).toFixed(2) }}km</text>
              <text class="distance_text">{{ item.address }}</text>
            </view>
            <view class="rewar_item_platform">
              <view v-for="(itemPlat, indexPlat) in item.note_platforms" :key="indexPlat" class="reward_item_platform_item">
                <view class="platform_item_img"><image :src="itemPlat.image" mode="widthFix" style="width: 100%"></image></view>
                <view class="platform_item_name">
                  {{itemPlat.title}}
                  <text v-if="itemPlat.platformType === 1 || itemPlat.platformType === 2">(粉丝数≥{{ itemPlat.apply_condition }}）</text>
                  <text v-if="itemPlat.platformType === 3 || itemPlat.platformType === 4">LV{{ itemPlat.apply_condition }}</text>
                </view>
              </view>
              <view class="platform_item_commission">
                <text>赏金:￥</text>
                <text style="font-size: 36rpx">{{ item.reward_amount }}</text>
              </view>
            </view>
            <view class="reward_item_btn">
              <view class="item_remain">还剩<text style="color: #FE5F03;">{{ item.remaining_daily_quota }}</text>份</view>
              <view v-if="item.total_quota - item.quota <= 0" class="item_btn_cancel">已抢光</view>
              <view v-else-if="item.user_enroll_status !== 100 && item.user_enroll_status !== 0" @click="gotoSignFun(item.id)" class="item_btn">任务进行中</view>
              <view v-else-if="item.user_enroll_status === 100" class="item_btn">任务已完成</view>
              <view v-else-if="item.user_enroll_status === 0" @click="gotoSignFun(item.id)" class="item_btn">立即报名</view>
            </view>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>
<script>
// import image from "uview-ui/libs/config/props/image";

const app = getApp();
export default {
  name: "reward-list",
  computed: {
    image() {
      // return image
    }
  },
  props: {
    shopList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      imgurl: app.globalData.imgurlBwc,

    }
  },
  methods: {
    gotoSignFun(id){
      let token = uni.getStorageSync('token')
      if (!token) {
        uni.showModal({
          title: '提示',
          content: '请先登录',
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定')
              uni.navigateTo({
                url: '/pages/login/login'
              })
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          }
        });
      } else {
        uni.navigateTo({
          url: '/pages_reward/pages/reward_detail/reward_detail?taskId=' + id
        })
      }

    }
  },
}
</script>
<style lang="scss">
.reward_list{
  .reward_list_content{
    padding: 0 20rpx;
    .reward_list_item{
      padding: 20rpx;
      background: #FFFFFF;
      border-radius: 24rpx;
      margin-bottom: 24rpx;
      display: flex;
      justify-content: space-between;
      // box-shadow: 0 0 8rpx 0 rgba(0, 0, 0, 0.05);
      .reward_item_img{
        width: 200rpx;
        height: 200rpx;
        border-radius: 16rpx;
        overflow: hidden;
      }
      .reward_item_warp{
        flex: 1;
        margin-left: 20rpx;
        position: relative;
        .reward_item_title{
          font-size: 28rpx;
          color: #3D3D3D;
          line-height: 40rpx;
          margin-bottom: 10rpx;
        }
        .reward_item_warp_content{

          /* 距离css */
          .reward_distance{
            padding-bottom: 10rpx;
            .distance_text{
              font-size: 24rpx;
              color: #666666;
            }
          }
          .rewar_item_platform{
            .reward_item_platform_item{
              display: flex;
              align-items: center;
              padding-bottom: 10rpx;
              .platform_item_img{
                width: 40rpx;
                height: 40rpx;
                border-radius: 50%;
                overflow: hidden;
              }
              .platform_item_name{
                margin-left: 10rpx;
                font-size: 24rpx;
                color: #666666;
                line-height: 34rpx;
              }
            }
            .platform_item_commission{
              font-size: 24rpx;
              color: #FF5F15;
              padding-top: 20rpx;
            }
          }
          .reward_item_btn{
            position: absolute;
            right: 0;
            bottom: 0;
            .item_remain{
              font-size: 24rpx;
              color: #888888;
              line-height: 34rpx;
              text-align: center;
              margin-bottom: 10rpx;
            }
            .item_btn{
              width: 160rpx;
              height: 56rpx;
              line-height: 56rpx;
              text-align: center;
              font-size: 26rpx;
              color: #FFFFFF;
              background: linear-gradient( 270deg, #FF5429 0%, #FF7F14 100%);
              border-radius: 200rpx 200rpx 200rpx 200rpx;
            }
            .item_btn_cancel{
              width: 160rpx;
              height: 56rpx;
              line-height: 56rpx;
              text-align: center;
              font-size: 26rpx;
              color: #FFFFFF;
              background: linear-gradient( 270deg, #CACACA 0%, #CECECE 100%);
              border-radius: 200rpx 200rpx 200rpx 200rpx;
            }
          }
        }
      }
    }
  }
}
</style>